<template>
  <div class="my_screen_page shu_ju_ju">

    <my-header title="自治区数据局" />

    <div class="mt20 pl20 pr20 df jcsb">
      <!-- 左边 -->
      <div class="w760">
        <div class="area_block_1">

          <!-- 数据交易 -->
          <div>

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">数据交易</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="scroll_box_2_1">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 6" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

          </div>

          <!-- 数据开放共享 -->
          <div class="mt40">

            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">数据开放共享</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <div class="scroll_box_2_2">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 5" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

          </div>

        </div>
      </div>

      <!-- 中边 -->
      <div class="w960">
        <div class="area_block_2">

          <!-- 数字经济核心产业 -->
          <div>
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">数字经济核心产业</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>

            <ul class="overall_list_core">
              <li class="item_overall_core">
                <div class="fz16 lh20 clamp_2 cor_fff tac h40 ov">规模以上计算机、通信和其他电子设备制造业增加值</div>
                <div class="mt20 df aic jcc">
                  <div class="df aic"><span class="fz24 text_font_DIN">3452.8</span><span
                      class="fz14 cor_777">亿元</span><span class="ml15 fz24 cor_00F text_font_DIN">12%</span></div>
                </div>
                <div class="mt30 chart_size_core">
                  <chart-line-one :chartData="lineData4"></chart-line-one>
                </div>
              </li>
              <li class="item_overall_core">
                <div class="fz16 lh20 clamp_2 cor_fff tac h40 ov">规模以上计算机、通信和其他电子设备制造业增加值</div>
                <div class="mt20 df aic jcc">
                  <div class="df aic"><span class="fz24 text_font_DIN">3452.8</span><span
                      class="fz14 cor_777">亿元</span><span class="ml15 fz24 cor_EF0 text_font_DIN">-3.6%</span></div>
                </div>
                <div class="mt30 chart_size_core">
                  <chart-line-one :chartData="lineData4"></chart-line-one>
                </div>
              </li>
              <li class="item_overall_core">
                <div class="fz16 lh20 clamp_2 cor_fff tac h40 ov">规模以上计算机、通信和其他电子设备制造业增加值</div>
                <div class="mt20 df aic jcc">
                  <div class="df aic"><span class="fz24 text_font_DIN">3452.8</span><span
                      class="fz14 cor_777">亿元</span><span class="ml15 fz24 cor_00F text_font_DIN">12%</span></div>
                </div>
                <div class="mt30 chart_size_core">
                  <chart-line-one :chartData="lineData4"></chart-line-one>
                </div>
              </li>
              <li class="item_overall_core">
                <div class="fz16 lh20 clamp_2 cor_fff tac h40 ov">规模以上计算机、通信和其他电子设备制造业增加值</div>
                <div class="mt20 df aic jcc">
                  <div class="df aic"><span class="fz24 text_font_DIN">3452.8</span><span
                      class="fz14 cor_777">亿元</span><span class="ml15 fz24 cor_00F text_font_DIN">12%</span></div>
                </div>
                <div class="mt30 chart_size_core">
                  <chart-line-one :chartData="lineData4"></chart-line-one>
                </div>
              </li>
            </ul>

            <div class="mt40 df jcsb">

              <div class="line_data_ul">
                <ul class="">
                  <li class="item_line_data" v-for="(item, index) in cityListData" :key="item.id">
                    <div class="param_data_flex flex_box aic">

                      <div class="num_box">
                        <img src="@/assets/images/dataCenter/rank_01.png" width="32px" height="32px" alt=""
                          v-if="item.id == 1" />
                        <img src="@/assets/images/dataCenter/rank_02.png" width="32px" height="32px" alt=""
                          v-else-if="item.id == 2" />
                        <img src="@/assets/images/dataCenter/rank_03.png" width="32px" height="32px" alt=""
                          v-else-if="item.id == 3" />
                        <span v-else>{{ item.id }}</span>
                      </div>

                      <div class="item ov">
                        <div class="flex_box aic">
                          <div class="w150">
                            <div class="fz16 lh20 cor_fff">{{ item.city }}</div>
                          </div>
                          <div class="w150"><span class="fz16 text_font_DIN cor_fff">{{ item.money }}</span><span
                              class="fz14 cor_777">{{ item.unit }}</span></div>
                          <div class="item ov tar"><span class="fz16 text_font_DIN"
                              :class="item.trend ? 'cor_00F' : 'cor_EF0'">{{ item.num }}%</span></div>
                        </div>
                        <div class="mt10 progress_bar">
                          <div class="current_progress" :style="`width: ${item.percent}%`"></div>
                        </div>
                      </div>

                    </div>
                  </li>
                </ul>
              </div>


              <div class="map_bg_re">
                <img src="@/assets/images/dataCenter/map_1.png" class="" style="width: 360px; height: 360px;"
                  alt="" /><!-- 图片是为了占位 -->
              </div>

            </div>

          </div>

        </div>
      </div>


      <!-- 右边 -->
      <div class="w760">
        <div class="area_block_1">

          <!-- 数字政府 -->
          <div>
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">数字政府</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_2_3">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 5" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!-- XXXXXX -->
          <div class="mt40">
            <div class="df aic jcc">
              <img src="@/assets/images/dataCenter/icon_t_arw_1.png" class="img_1" alt="" />
              <div class="page_title_text">XXXXXX</div>
              <img src="@/assets/images/dataCenter/icon_t_arw_2.png" class="img_1" alt="" />
            </div>
            <div class="scroll_box_2_4">
              <ul class="jian_list_box">
                <!-- <vue3SeamlessScroll :list="list1" :hover="true" :step="0.3"> -->


                <li class="item_jian_box" v-for="(item, index) in 5" :key="index">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_EF0 text_font_DIN fz24">-5.65%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
                <!-- </vue3SeamlessScroll> -->
                <li class="item_jian_box">
                  <div class="flex_box aic hp100">
                    <div class="item ov">
                      <div class="fz16 lh20 clamp_2">新登记经营主体户数</div>
                    </div>
                    <div class="ml10 w136"><span class="text_font_DIN fz24">301656</span><span
                        class="ml5 fz14 cor_777">户</span>
                    </div>
                    <div class="w120 cor_00F text_font_DIN fz24">____%</div>
                    <div class="chart_mini_size">
                      <chart-line-one :chartData="lineData4"></chart-line-one>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>


    </div>
  </div>
</template>

<script setup>

import { ref, reactive } from 'vue';
import MyHeader from '../components/my-header.vue';
import chartLineOne from '@/components/chartLineOne.vue';

const lineData4 = reactive({
  names: ['耗能'],
  datas: [[65, 126, 57, 110, 129, 150, 91, 152]],
  dataX: [1,2,3,4,5,6,7,8],
  cell: '耗能',
  colorList: ['rgba(0, 240, 247, 1)']
});

const cityListData = reactive([
  { id: 1, city: '南宁', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 2, city: '柳州', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 3, city: '桂林', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 4, city: '梧州', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 5, city: '北海', money: 1900, unit: '亿元', num: '-3.1', trend: false, percent: 50 },
  { id: 6, city: '防城港', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 7, city: '钦州', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 8, city: '贵港', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 9, city: '玉林', money: 1900, unit: '亿元', num: '-3.1', trend: false, percent: 40 },
  { id: 10, city: '百色', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 11, city: '贺州', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 12, city: '河池', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 60 },
  { id: 13, city: '来宾', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 },
  { id: 14, city: '崇左', money: 1900, unit: '亿元', num: '+3.1', trend: true, percent: 50 }
])

</script>

<style lang="scss" scoped>

.shu_ju_ju {

  .scroll_box_2_1,.scroll_box_2_2,.scroll_box_2_3,.scroll_box_2_4 {
    position: relative;
    height: 628px;
    overflow: hidden;
    margin-top: 24px;
  }

    .jian_list_box {
      position: relative;
  
      .item_jian_box {
        position: relative;
        padding: 0 16px;
        height: 98px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 8px;
  
        .chart_mini_size {
          position: relative;
          width: 200px;
          height: 66px;
        }
      }
    }

    .jian_list_box_2 {
      position: relative;
  
      .item_jian_box_2 {
        position: relative;
        padding: 0 16px;
        height: 112px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 6px;
  
        .chart_mini_size_2 {
          position: relative;
          width: 200px;
          height: 80px;
        }
      }
    }

    .jian_list_box_3 {
      position: relative;
  
      .item_jian_box_3 {
        position: relative;
        padding: 0 16px;
        height: 96px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 6px;
  
        .chart_mini_size_3 {
          position: relative;
          width: 200px;
          height: 64px;
        }
      }
    }

    .jian_list_box_2 {
      position: relative;
  
      .item_jian_box_2 {
        position: relative;
        padding: 0 16px;
        height: 112px;
        color: #fff;
        font-size: 16px;
        background: rgba(2, 20, 37, 0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43, 141, 191, 0.6);
        border-radius: 8px;
        margin-bottom: 6px;
  
        .chart_mini_size_2 {
          position: relative;
          width: 200px;
          height: 80px;
        }
      }
    }

    .overall_list_core {
      position: relative;
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      .item_overall_core {
        position: relative;
        padding: 16px 16px 0;
        width: 214px;
        height: 196px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        background: rgba(2,20,37,0.9);
        box-shadow: inset 0px 0px 8px 0px rgba(43,141,191,0.6);
        border-radius: 8px;
        .chart_size_core {
          position: relative;
          width: 100%;
          height: 50px;
        }
      }
    }

    .map_bg_re {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 440px;
      height: 1132px;
      background: url('@/assets/images/dataCenter/icon_map_bg_1.png') no-repeat;
      background-size: 440px 1132px;
      .chart_map_size {
        position: relative;
        width: 100%;
        height: 360px;
      }
    }

    .line_data_ul {
      position: relative;
      width: 440px;
      height: 1132px;
      overflow: hidden;
      .item_line_data {
        position: relative;
        padding: 0 16px;
        height: 66px;
        background: rgba(29,138,221,0.2);
        border-radius: 8px;
        margin-bottom: 16px;
        cursor: pointer;
        .param_data_flex {
          position: relative;
          height: 100%;
          .num_box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            font-family: DIN;
            margin-right: 8px;
          }
          .progress_bar {
            position: relative;
            height: 6px;
            background: rgba(0,240,247,0.3);
            overflow: hidden;
            .current_progress {
              position: relative;
              height: 100%;
              background: #00F0F7;
            }
          }
        }
      }
    }
}

</style>